<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 50%">
      <template v-for="(item, index) in columns">
        <el-table-column
          :key="index"
          v-if="item.field"
          :label="item.title"
          :prop="item.field"
          :width="item.width"
        >
          <template slot-scope="scope">{{ scope.row[item.field] }}</template>
        </el-table-column>
        <!-- 自定义 -->
        <el-table-column
          :label="item.title"
          :key="index"
          :width="item.width"
          v-else
        >
          <template slot-scope="scope">
            <el-checkbox @change="handleChange(scope.row)">查看</el-checkbox>
            <el-checkbox @change="handleChange(scope.row)">读写</el-checkbox>
            <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
            <i class="el-icon-delete"></i>
          </template>
        </el-table-column>
        <!-- 自定义 -->
      </template>
    </el-table>
    <!-- 表格 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表格列数据
      columns: [
        { title: "一级菜单", field: "partition_Name", width: "150" },
        { title: "二级菜单", field: "field_Name", width: "150" },
        { title: "操作" },
      ],
      //表格数据
      tableData: [
        {
          partition_Name: "推广数据",
          field_Name: "一级渠道库",
        },
        {
          partition_Name: "推广数据",
          field_Name: "渠道用户配置",
        },
        {
          partition_Name: "活动管理",
          field_Name: "活动下线",
        },
        {
          partition_Name: "知识库",
          field_Name: "知识库表",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    //操作指定行数据
    handleChange(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .cell {
  text-align: center;
}
::v-deep .el-icon-delete {
  margin-left: 25px;
  font-size: 18px;
  color: red;
}
</style>
